<template>
	<view class="">
		<!-- <view class="uni-tab-bar">
			<scroll-view scroll-x class="uni-swiper-tab">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)">
						{{tab.name}}
						<view class="swiper-tab-line"></view>
					</view>
				</block>
			</scroll-view>
		</view> -->
		<view class="search-con">
			<view class="search-list">
				<block v-for="(value,key) in listData" :key="key">
				<view class="search-nr" @tap="ondoctTap(value.id)">
					<view class="avatarbox">
						<image :src="value.avatar" mode="aspectFill"></image>
					</view>
					<view class="search-nrxx">
						<view class="u-f u-f-jsb">
							<view class="xmtitle">
								<text class="telis">{{value.name}}</text>
							</view>
							<view class="zxbtn">+{{value.price}}</view>
						</view>
						<view class="">
							<view class="yytp u-f">
								<text style="font-size: 10px;color: #a1a1a1;background: #f0f0f0;padding: 1px 4px;border-radius: 2px;">{{value.type}}</text>
								<text style="margin-left: 10px; font-size: 10px; color: #a1a1a1; background: #f0f0f0; padding: 2px 4px; border-radius: 2px;">ID:{{value.id}}</text>
							</view>
							<view class="yybox u-f u-f-jsb">
								<text>剩余{{value.sumsy}}人</text><text>{{value.sumed}}人已赚</text>
							</view>
						</view>
					</view>
				</view>
				</block>
			</view>
		</view>
		<view v-if="ontotal" class="no-data">您的搜索找不到信息</view>
		
		<!-- 默认 -->
		<view class="wrapper">
			<view v-if="isHistory" class="history-box">
				<view v-if="historyList.length > 0">
					<view class="history-title">
						<text>搜索历史</text>
						<text class="uni-icon uni-icon-trash" @click="clearSearch"></text>
					</view>
					<view class="history-content">
						<view class="history-item" v-for="(item, index) in historyList" :key="index">
							<view class="" @tap="oncityTap(item.name,item.tp)">
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
				<view v-else class="no-data">您还没有历史记录</view>
			</view>
		</view>
		<view>
			<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer('right')" >
				<scroll-view :scroll-top="scrollTop" scroll-y="true"  class="scroll-Y" style="padding-bottom: 70px;" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
				<view style="clear: both;"></view>
				<view class="addtitleks">
					任务类型查找
				</view>
				<view class="tplist">
					<uni-list-item :show-badge="true" title="下载任务" badge-text="12" />
					<uni-list-item :show-badge="true" title="砍价红包" badge-text="56" />
					<uni-list-item :show-badge="true" title="关注投票" badge-text="45" />
					<uni-list-item :show-badge="true" title="关注投票" badge-text="89" />
					<uni-list-item :show-badge="true" title="分享转发" badge-text="18" />
					<uni-list-item :show-badge="true" title="电商" badge-text="62" />
					<uni-list-item :show-badge="true" title="多天任务" badge-text="9" />
					<uni-list-item :show-badge="true" title="高价任务" badge-text="48" />
					<uni-list-item :show-badge="true" title="其他任务" badge-text="85" />
				</view>
				<view style="clear: both;"></view>
				</scroll-view>
				<view class="u-f u-f-r" style="width: 100%; position: fixed; bottom: 15px;">
					<button class="onzzTap" type="primary" @tap="onzzTap()">重置</button>
					<button class="onokTap" type="primary" @tap="onokTap()">确定</button>
				</view>
			</uni-drawer>
		</view> 
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	import util from '@/components/amap-wx/js/util.js'
	export default {
		components: {
			uniList,
			uniIcon,
			uniDrawer,
			uniLoadMore
		},
		data() {
			return {
				historyList: [],
				isHistory: true,
				flng: true,
				timer: null,
				
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				swiperheight: 500,
				tabIndex: 0,
				showRigth: false,
				showLeft: false,
				tabBars: [{
						name: "任务",
						id: "ys"
					},{
						name: "筛选",
						id: "sx"
					}
				],
				citylist:[],
				listData: [],
				reload: true,
				last_id: 0,
				ontotal:false,
				datatotal:false,
				sstp:0,
				province:'',
				department:'',
				binli:'',
				webUrl:'',
				
				ssval:'',
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				}
				
			}
		},
		//监听搜索框文本变化
		onNavigationBarSearchInputChanged(e) {
			let text = e.text;
			if (!text) {
				this.flng=true;
				this.isHistory = true;
				this.historyList = [];
				this.historyList = uni.getStorageSync('search:history');
				return;
			} else {
				this.isHistory = false;
				this.ontotal=false;
				this.datatotal=false
			}
		},
		//监听点击搜索按钮事件
		onNavigationBarSearchInputConfirmed(e) {
			this.hide();
			let text = e.text;
			if (!text) {
				this.isHistory = true;
				this.historyList = [];
				this.historyList = uni.getStorageSync('search:history');
				uni.showModal({
					title: '',
					content:"请输入搜索内容",
					showCancel: false,
					confirmText: "确定",
					confirmColor:"#e19503",
					success: function (res) {
						
					}
				});
				return;
			} else {
				this.ssval=text;
				util.setHistory(text,0);
				this.reload = true;
				this.last_id=0;
				this.province='';
				this.department='';	
				this.binli='';	
							
				this.getList();//点击搜索方法
			}
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
			
		},
		// 监听原生标题导航按钮点击事件
		onNavigationBarButtonTap(e) {
			this.flng=true;
			this.isHistory = true;
			this.datatotal=false;
			
			const currentWebview = this.$mp.page.$getAppWebview();
			currentWebview.setTitleNViewSearchInputText('');	
		},
		onLoad(event) {
			console.log(event.key)
			this.province='';
			this.department='';
			this.binli='';

			
			setTimeout(() => {
				this.showImg = true;
			}, 400)
			this.historyList = uni.getStorageSync('search:history');
			if(event.key){
				this.ssval=event.key;
				this.getList();
			}
		},
		onReachBottom() {
			var  ssval = this.ssval;
		    this.last_id = this.last_id+1;
			var sstp = this.sstp;
			this.status = 'more';
			this.getList(ssval,sstp);
		},
		methods: {
			onzzTap(){
				this.province='';
				this.department='';
				this.binli='';
				this.ssval='';
				this.last_id=0;
				this.listData=[],
				this.getList();
			},
			onokTap(){
				this.hide();
			},
			getList() {
				console.log(this.config.webUrl)
				var thia=this
				var ssval=this.ssval
				let data = {
					//column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
				};
				var limit=10;
				if (this.last_id>0) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data.offset = this.last_id*limit;
					data._ = new Date().getTime() + '';
				}
				data.limit=limit
				data.keytext=this.ssval
				uni.showLoading({ mask: true,title: '加载中' });  
				uni.request({
					url: this.config.webUrl+'/api/index/lists',
					data: data,
					success: data => {
						uni.hideLoading();
						
						if (data.data.total>0) {
							this.flng=false;
							this.ontotal=false;
							this.isHistory=false;

							let list = data.data.rows;
							this.listData = this.reload ? list : this.listData.concat(list);
							this.reload = false;
							this.last_id = this.last_id+1;
							if(data.data.total<this.last_id*limit){
								this.status = '';
							}
						}
						if(data.data.total==0){
							this.ontotal=true;
							this.flng=true;
							this.isHistory=false;
							this.datatotal=false;
							
						}
					},
					fail: (data, code) => {
							uni.hideLoading();
							console.log('fail' + JSON.stringify(data));
					}
				});
			},

			ondoctTap(id){
				uni.navigateTo({
					url: `/pages/doctor/doctor?id=${id}`
				})
			},
			oncityTap(name,tp,bdd){
				this.ssval=name;
				//console.log(bdd)
				this.reload = true;
				if(tp==1){
					this.province=name;
				}
				if(tp==3 && bdd){
					this.department=bdd;
				}
				if(tp==3){
					this.binli=name;
				}
				
				// #ifdef APP-PLUS
				// #endif
				this.getList();//点击搜索方法
			},
			tabtap(index){
				//this.tabIndex=index
			    //this.$emit('tabtap',index)
				if(index==1){
					this.show('right')
				}
			},
			// tabbar点击事件
			ssjlTap(name,tp){
				this.tabIndex = 0;
				
			},
			onDoctorTap(){
				uni.navigateTo({
					url: '/pages/doctor/doctor'
				})
			},
			show(e) {
				if (e === 'left') {
					this.showLeft = true
				} else {
					this.showRigth = true
				}
			},
			hide() {
				this.showLeft = false
				this.showRigth = false
			},
			upper: function(e) {
			},
			lower: function(e) {
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			closeDrawer(e) {
				if (e === 'left') {
					this.showLeft = false
				} else {
					this.showRigth = false
				}
			},
			/**
			 * 清理历史搜索数据
			 */
			clearSearch() {
				uni.showModal({
					title: '温馨提示',
					content: '是否清理全部搜索历史？该操作不可逆。',
					success: res => {
						if (res.confirm) {
							this.historyList = util.removeHistory();
						}
					}
				});
			},
			
		}
	}
</script>

<style>
	.telis{
		height: 22px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.scroll-Y{
		height: 100%;
	}
	.addtitle{
		font-size: 28upx;
		line-height: 36px;
		padding-left: 60upx;
		border-bottom: 1upx solid #e5e5e5;
		position: relative;
		font-weight: bold;
	}
	.addtitle:after{
		font-family: iconfont;
		position: absolute;
		top: 0px;
		left: 20upx;
		content: '\E76A';
		font-size: 18px;
		color: #666;
	}
	.addtitleks{
		font-size: 28upx;
		line-height: 36px;
		padding-left: 60upx;
		border-bottom: 1upx solid #e5e5e5;
		position: relative;
		font-weight: bold;
	}
	.addtitleks:after{
		font-family: iconfont;
		position: absolute;
		top: 0px;
		left: 20upx;
		content: '\e6f3';
		font-size: 18px;
		color: #666;
	}
	.kslist{
		font-size: 28upx;
		padding-left: 30upx;
	}
	.addlist{
		
		justify-content: space-between;
	}
	.addlist>view{
		width: 31%;
		float: left;
		padding: 10upx;
		border-radius: 6upx;
		background: #f9f9f9;
		text-align: center;
		color: #666;
		font-size: 24upx;
		margin: 6upx 1%;
		box-sizing: border-box;
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //溢出用省略号显示
		white-space:nowrap; //溢出不换行
	}
	.onzzTap{
		height: 36px;
		line-height: 36px;
		font-size: 28upx;
		padding: 0 50upx;
		background: #f49315!important;
	}
	.onokTap{
		height: 36px;
		line-height: 36px;
		font-size: 28upx;
		padding: 0 50upx;
		background: #f17503;
		background: -webkit-linear-gradient(left, #f49315 , #f17503);
		background: -o-linear-gradient(right, #f49315, #f17503);
		background: -moz-linear-gradient(right, #f49315, #f17503);
		background: -webkit-gradient(linear, left top, right top, from(#f49315) , to(#f17503));
		background: -o-linear-gradient(left, #f49315 , #f17503);
		background: linear-gradient(to right, #f49315 , #f17503);
	}
	.uni-swiper-tab{
		height: 86upx;
		line-height: 60upx;
		padding-bottom: 20upx;
		background: #f5f5f5;
		border-bottom: none;
	}
	.swiper-tab-list{
		width: 50%;
		color: #969696;
		font-weight: bold;
	}
	.uni-tab-bar{
		/* position: fixed;
		top: 0px;
		left: 0;
		right: 0;
		z-index: 9999;
		padding-bottom: 0!important; */
	}
	.uni-tab-bar .active{
		color: #343434;
	}
	.active .swiper-tab-line{
		border-bottom: 3upx solid #f49315;
		width: 70upx;
		margin: auto;
		border-top: 3upx solid #f49315;
		border-radius: 20upx;
		
	}
	
	.uni-media-list-logo {
		width: 120px;
		height: 80px;
	}
	.searchls{
		width: 100%;
		padding-left: 3%;
		padding-right: 3%;
		box-sizing: border-box;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
	}
	.searchls>view{
		padding-top: 20upx;
		padding-bottom: 20upx;
	}
	.searchls>view>view:first-child{
		font-size: 32upx;
		color: #3a3a3a;
	}
	.searchls>view>view:last-child{
		font-size: 38upx;
		color: #999;
		padding-left: 30upx;
	}
	.searchs text{
		background: #f5f5f5;
		border-radius: 30upx;
		padding: 2upx 30upx;
		margin: 5px;
		float: left;
		color: #666;
	}
	.search-list{
		padding-bottom: 0upx;
	}
	.yybox{
		color: #666;
	}
	.yytp{
		color: #999;
	}
	.searchsc{
		color: #666;
		font-size: 28upx;
		padding-left: 90px;
		box-sizing: border-box;
		text-align:justify;
		text-align-last: left;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:3; 
	}
	.search-con{
		padding:0upx 20upx;
		box-sizing: border-box;
		padding-top: 10upx;
	}
	.search-jcrs{
		color: #999;
	}
	.search-jcrs text{
		font-size: 28upx;
		font-weight: bold;
		color: #d1632d;
	}
	.zxbtn{
		color: #F17503;
		font-size: 32upx;
		height: 46upx;
		font-weight: 500;
		line-height: 46upx;
		border-radius: 28upx;
	}
	.search-nr{
		width: 100%;
		min-height: 104px;
		padding: 20upx;
		margin: 20upx auto;
		border-radius: 16upx;
		-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
		margin: 20upx auto;
		background: #fafafa;
		position: relative;
		overflow: hidden;
	}
	.avatarbox{
		position: absolute;
		top: 25upx;
		left: 20upx;
		width:160upx;
		height: 160upx;
		border-radius: 50%;
		overflow: hidden;
	}
	.avatarbox image{
		width:160upx;
		height: 160upx;
		border-radius: 50%;
		overflow: hidden;
	}
	.search-nrxx{
		padding-top: 10upx;
	}
	.search-nrxx>view{
		padding-left: 180upx;
	}
	.satl-img{
		position: absolute;
		top:140upx;
		left:140upx;
		width: 28upx;
		height: 28upx;
		
	}
	
	/* 抽屉 */
	.example {
		padding: 0 30upx 30upx
	}
	
	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}
	
	.example .example-title {
		margin: 40upx 0
	}
	
	.example-body {
		padding: 0 40upx
	}
	
	.header {
		display: flex;
		flex-direction: row;
		padding: 10px 15px;
		align-items: center;
	}
	
	.input-view {
		display: flex;
		align-items: center;
		flex-direction: row;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 10px;
		flex: 1;
	}
	
	.uni-padding-wrap {
		padding: 0 15px;
		line-height: 1.8;
	}
	
	.input {
		flex: 1;
		padding: 0 5px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
	}
	
	.input-view .input {
		background-color: transparent;
	}
	
	.close {
		padding: 30upx;
	}
	.history-title {
		display: flex;
		justify-content: space-between;
		padding: 20upx 30upx;
		padding-bottom: 0;
		font-size: 34upx;
		color: #333;
	}
	.history-title .uni-icon {
		font-size: 40upx;
	}
	.history-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15upx;
	}
	.history-item {
		padding: 4upx 35upx;
		border: 1px #f1f1f1 solid;
		background: #fff;
		border-radius: 50upx;
		margin: 12upx 10upx;
		color: #999;
	}
	.history-list-box {
		/* margin: 10upx 0; */
	}
	.history-list-item {
		padding: 30upx 0;
		margin-left: 30upx;
		border-bottom: 1px #EEEEEE solid;
		font-size: 28upx;
	}
	
	.no-data {
		text-align: center;
		color: #999;
		margin: 100upx;
	}
</style>
